<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
This file is part of Canviz. See http://www.canviz.org/
$Id: index.html 406 2013-07-24 20:24:44Z ryandesign.com $
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>canviz: graphviz on a canvas</title>
    <link rel="stylesheet" type="text/css" href="canviz.css" />
    <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="canviz-ie6.css" /><![endif]-->
    <!--[if lt IE 9]><script type="text/javascript" src="excanvas/excanvas.js"></script><![endif]-->
    <script type="text/javascript" src="build/canviz.js"></script>
    <script type="text/javascript" src="examples/contentloaded/contentloaded.js"></script>
    <script type="text/javascript" src="x11colors.js"></script>
    <script type="text/javascript" src="graphs/graphlist.js"></script>
    <script type="text/javascript" src="graphs/layoutlist.js"></script>
    <script type="text/javascript"><!--
var canviz;
contentLoaded(window, function() {
  setTimeout(function() {
  graphs.sort(function(a, b) {
    a = a.replace(/.*\//, '').toLowerCase();
    b = b.replace(/.*\//, '').toLowerCase();
    return (a > b) ? 1 : (a < b) ? -1 : 0;
  });
  var i, list = document.getElementById('graph_name');
  for (i = 0; i < graphs.length; ++i) {
    var graph = graphs[i];
    list.options[list.options.length] = new Option(graph.replace(/^.*\/(.*)$/, '$1').replace(/^(.*)\.txt$/, '$1'), graph, false, i == 0);
  }
  
  list = document.getElementById('graph_engine');
  for (i = 0; i < layouts.length; ++i) {
    var layout = layouts[i];
    list.options[list.options.length] = new Option(layout, layout, false, 'dot' == layout);
  }
  
  list = document.getElementById('graph_scale');
  var scales = [4, 2, 1.5, 1, 0.75, 0.5];
  for (i = 0; i < scales.length; ++i) {
    var scale = scales[i];
    list.options[list.options.length] = new Option(100 * scale + '%', scale, false, 1 == scale);
  }
  
  canviz = Canviz('graph_container');
  canviz.setImagePath('graphs/images/');
  canviz.setScale(list.options[list.selectedIndex].value);
  load_graph();
  }, 0);
});
function load_graph() {
  canviz.load(graph_url());
}
function set_graph_scale() {
  var graphScale = document.getElementById('graph_scale');
  canviz.setScale(graphScale.options[graphScale.selectedIndex].value);
  canviz.draw();
}
function change_graph(inc) {
  var graphName = document.getElementById('graph_name');
  graphName.selectedIndex = ((graphName.selectedIndex + inc) + graphName.options.length) % graphName.options.length;
  load_graph();
}
function change_engine(inc) {
  var graphEngine = document.getElementById('graph_engine');
  graphEngine.selectedIndex = ((graphEngine.selectedIndex + inc) + graphEngine.options.length) % graphEngine.options.length;
  load_graph();
}
function change_scale(inc) {
  var graphScale = document.getElementById('graph_scale');
  var new_scale = graphScale.selectedIndex + inc;
  if (new_scale < 0 || new_scale >= graphScale.options.length) {
    return;
  }
  graphScale.selectedIndex = new_scale;
  set_graph_scale();
}
function view_source() {
  window.open(graph_url());
}
function graph_url() {
  var graphEngine = document.getElementById('graph_engine'),
    graphName = document.getElementById('graph_name');
  return 'graphs/' + graphEngine.options[graphEngine.selectedIndex].value + '/' + graphName.options[graphName.selectedIndex].value;
}
// --></script>
  </head>
  <body>
    <form action="javascript:void(0)" id="graph_form">
      <fieldset>
        <legend>Graph file</legend>
        <input type="button" class="little_button" value="&lt;" onclick="change_graph(-1)" />
        <select name="graph_name" id="graph_name" onchange="load_graph()"></select>
        <input type="button" class="little_button" value="&gt;" onclick="change_graph(1)" />
      </fieldset>

      <fieldset>
        <legend>Layout engine</legend>
        <input type="button" class="little_button" value="&lt;" onclick="change_engine(-1)" />
        <select name="graph_engine" id="graph_engine" onchange="load_graph()"></select>
        <input type="button" class="little_button" value="&gt;" onclick="change_engine(1)" />
      </fieldset>

      <fieldset>
        <legend>Magnification</legend>
        <input type="button" class="little_button" value="-" onclick="change_scale(1)" />
        <select name="graph_scale" id="graph_scale" onchange="set_graph_scale()"></select>
        <input type="button" class="little_button" value="+" onclick="change_scale(-1)" />
      </fieldset>

      <fieldset>
        <input type="button" class="big_button" value="View Dot Source" onclick="view_source()" />
      </fieldset>
    </form>

    <div id="page_container">
      <div id="graph_container"></div>
      <div id="debug_output"></div>
    </div>
  </body>
</html>
